<script setup lang="ts">
import { getCaptcha } from "@/views/domain/session/api/session";
import { onMounted, ref, watch } from "vue";
const props = defineProps<{ uuid?: string }>();

const emit = defineEmits(["load", "update:uuid"]);
const imgSrc = ref("");
const reloadCaptcha = async () => {
  const { data } = await getCaptcha();
  imgSrc.value = data.img;
  emit("load", data.uuid);
  emit("update:uuid", data.uuid);
};

watch(
  () => props.uuid,
  v => {
    if (v === "") reloadCaptcha();
  }
);

onMounted(() => {
  reloadCaptcha();
});
</script>

<template>
  <div style="width: 120px; height: 40px">
    <el-image :src="imgSrc" @click="reloadCaptcha" />
  </div>
</template>
<style lang="scss" scoped></style>
